<template>
  <section class="component add-change-type">
    <el-form :model="model" :rules="rules" label-width="100px" ref="detail">
      <el-row>
        <el-col :span="8">
          <el-form-item label="类型名称">{{ model.name }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="启用标识">{{
            model.tagStatus === "STOP_USE" ? "停用" : "启用"
          }}</el-form-item>
        </el-col>
      </el-row>
      <div class="title-big">选择需联动的标签字段</div>
      <div class="title">AT调整</div>
      <el-form-item label="添加">
        <span v-for="item in row.at" :key="item"> {{ item }}， </span>
      </el-form-item>
      <el-form-item label="删除">
        <span v-for="item in row.delAt" :key="item"> {{ item }}， </span>
      </el-form-item>
      <div class="title">CT调整</div>
      <el-form-item label="添加">
        <span v-for="item in row.ct" :key="item"> {{ item }}， </span>
      </el-form-item>
      <el-form-item label="删除">
        <span v-for="item in row.delCt" :key="item"> {{ item }}， </span>
      </el-form-item>
      <el-form-item label="调整注记">
        {{ row.note }}
      </el-form-item>
    </el-form>

    <div class="confirm-button">
      <el-button @click="emitClose">关闭</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class AddChangeType extends Vue {
  @Prop() private row;
  private model: any = {
    name: "",
    tagStatus: "",
    at: [],
    ct: []
  };
  private rules: any = {};

  private dataHandler() {
    this.model = this.row;
  }

  @Emit("close") private emitClose() {}
}
</script>
<style lang="less" scoped>
.component.add-change-type {
  .title-big {
    margin: 0 0 20px 30px;
  }
  .title {
    font-size: 12px;
    margin: 0 0 20px 30px;
  }
}
</style>
